<template>
  <div class="profile-container">
    <div class="profile-card">
      <h2>个人资料</h2>
      
      <div class="user-info">
        <div class="avatar-section">
          <img :src="userInfo.avatarUrl || '/default-avatar.png'" alt="avatar">
          <button @click="$refs.fileInput.click()">更换头像</button>
          <input 
            type="file" 
            ref="fileInput" 
            style="display: none" 
            accept="image/*"
            @change="handleAvatarUpload"
          >
        </div>

        <div class="info-section">
          <div class="info-item">
            <label>用户名</label>
            <span>{{ userInfo.username }}</span>
          </div>

          <div class="info-item">
            <label>昵称</label>
            <div v-if="!isEditing.nickname" @click="startEdit('nickname')" class="editable">
              {{ userInfo.nickname || '设置昵称' }}
            </div>
            <div v-else class="edit-input">
              <input 
                v-model="editData.nickname" 
                @blur="saveEdit('nickname')"
                ref="nicknameInput"
                placeholder="设置昵称"
              >
            </div>
          </div>

          <div class="info-item">
            <label>个性签名</label>
            <div v-if="!isEditing.bio" @click="startEdit('bio')" class="editable">
              {{ userInfo.bio || '编辑个性签名' }}
            </div>
            <div v-else class="edit-input">
              <textarea 
                v-model="editData.bio" 
                @blur="saveEdit('bio')"
                ref="bioInput"
                placeholder="编辑个性签名"
              ></textarea>
            </div>
          </div>

          <div class="info-item">
            <label>性别</label>
            <select v-model="userInfo.gender" @change="saveUserInfo">
              <option value="">保密</option>
              <option value="male">男</option>
              <option value="female">女</option>
            </select>
          </div>

          <div class="info-item">
            <label>生日</label>
            <input 
              type="date" 
              v-model="userInfo.birthday"
              @change="saveUserInfo"
            >
          </div>

          <div class="info-item">
            <label>所在地</label>
            <div v-if="!isEditing.location" @click="startEdit('location')" class="editable">
              {{ userInfo.location || '设置所在地' }}
            </div>
            <div v-else class="edit-input">
              <input 
                v-model="editData.location" 
                @blur="saveEdit('location')"
                ref="locationInput"
                placeholder="设置所在地"
              >
            </div>
          </div>

          <div class="info-item">
            <label>个人主页</label>
            <div v-if="!isEditing.website" @click="startEdit('website')" class="editable">
              {{ userInfo.website || '添加个人主页' }}
            </div>
            <div v-else class="edit-input">
              <input 
                v-model="editData.website" 
                @blur="saveEdit('website')"
                ref="websiteInput"
                placeholder="添加个人主页"
              >
            </div>
          </div>

          <div class="info-item">
            <label>注册时间</label>
            <span>{{ formatDate(userInfo.registerTime) }}</span>
          </div>


        </div>
      </div>

      <!-- 管理员申请部分 -->
      <div v-if="!userInfo.isAdmin" class="admin-apply">
        <button 
          v-if="!adminApplication" 
          @click="showApplyModal = true"
          class="apply-btn"
        >申请成为管理员</button>
        <p v-else class="apply-status">
          申请状态：{{ getApplicationStatus(adminApplication) }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem('currentUser') || '{}'),
      isEditing: {
        nickname: false,
        bio: false,
        location: false,
        website: false
      },
      editData: {
        nickname: '',
        bio: '',
        location: '',
        website: ''
      },
      showApplyModal: false,
      adminApplication: null
    }
  },
  methods: {
    formatDate(dateString) {
      return new Date(dateString).toLocaleString()
    },
    startEdit(field) {
      this.editData[field] = this.userInfo[field] || ''
      this.isEditing[field] = true
      this.$nextTick(() => {
        this.$refs[`${field}Input`].focus()
      })
    },
    saveEdit(field) {
      this.userInfo[field] = this.editData[field]
      this.isEditing[field] = false
      this.saveUserInfo()
    },
    saveUserInfo() {
      localStorage.setItem('currentUser', JSON.stringify(this.userInfo))
      
      // 更新用户列表中的用户信息
      const users = JSON.parse(localStorage.getItem('users') || '[]')
      const userIndex = users.findIndex(u => u.username === this.userInfo.username)
      if (userIndex !== -1) {
        users[userIndex] = { ...users[userIndex], ...this.userInfo }
        localStorage.setItem('users', JSON.stringify(users))
      }
    },
    // ... 其他现有方法保持不变 ...
  }
}
</script>

<style lang="scss">
@import '../style/UserProfile.scss';
</style> 